<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../css/swiper.min.css">
    <style>
    	body{padding:20px 10%;}
		.mid{width:100%;height:120px;background: #fff;border-radius: 5px;float:left;text-align: center;line-height: 120px;}
		.swiper_box .swiper-pagination{height:0px;}
		.swiper_box .swiper-pagination-bullet{opacity:1;background: transparent;}
		.swiper_box .swiper-pagination-bullet-active{background: transparent;}
		.swiper_box .swiper-pagination-bullet-active .spanSame{border:3px solid #fff;}
		.swiper_box .spanSame{width:30px;height:30px;display:inline-block;border-radius: 50%;color:#666;text-align: center;line-height: 30px;}
		.swiper_box .span1{background: #7ebfde;margin-top:30px;}
		.swiper_box .span2{background: #aac2f7;float:right;margin-top:60px;}
		.swiper_box .span3{background: #f8b9e7;margin-top:90px;margin-left:45%;}
		.swiper_box .span4{background: #9cdcda;margin-top:150px;float:left;}
		.swiper_box .span5{background: #ece198;margin-top:140px;float:right;}
    </style>
</head>
<body style="background: #d6d6d6;">
    <!-- Swiper -->
    <div class="swiper_box">
	    <div class="swiper-container">
	        <div class="swiper-wrapper">
	            <div class="swiper-slide"><div class="mid">Slide 1</div></div>
	            <div class="swiper-slide"><div class="mid">Slide 2</div></div>
	            <div class="swiper-slide"><div class="mid">Slide 3</div></div>
	            <div class="swiper-slide"><div class="mid">Slide 4</div></div>
	            <div class="swiper-slide"><div class="mid">Slide 5</div></div>
	        </div>
	        <!-- Add Pagination -->
	        
	    </div>
	    <div class="swiper-pagination"></div>
    </div>
 
    <!-- Swiper JS -->
    <script src="../js/swiper.min.js"></script>
    <script src="js/jquery.min.js"></script>
 
    <!-- Initialize Swiper -->
    <script>
	    var swiper = new Swiper('.swiper-container', {
	        pagination: '.swiper-pagination',
	        slidesPerView: 'auto',
	        centeredSlides: true,
	        paginationClickable: true,
            paginationBulletRender: function (swiper, index, className) {
			    return '<span class="spanSame span' + (index + 1) + '">' + (index + 1) + '</span>';
			},
	    });
    	
    	$(".swiper-pagination").on("click","span",function(){
    		var index = $(this).index();
    		swiper.slideTo(index);
    	})
 
    </script>
</body>
</html>